<template>
	<view class="content">
		<view class="details" @tap="toDetail">
			<view class="text">
				消费明细
			</view>
			<view class="lg text-gray cuIcon-right">
			</view>
		</view>
		<view class="details" @tap="toDetail1" style="border-bottom: 10rpx solid #F5F5F5;">
			<view class="text">
				待付款会员卡
			</view>
			<view class="lg text-gray cuIcon-right">
			</view>
		</view>
		<view class="can-buy" >
			<view class="title">
				可购会员卡
			</view>
			<swiper v-if="isshow1" class="card-swiper" style="padding:0 15rpx;"
				 :autoplay="false" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
				 indicator-active-color="#0081ff">
					<swiper-item v-for="(item,index) in swiperList" :key="index"  style="left:28rpx;padding:0;">
						<view class="swiper-item" :class="{onlyOne:swiperList.length == 1}" style="padding-right:24rpx"  v-if="isshow1">
							<view class="card card1">
								<view class="top">
									<view class="text">
										{{shopName}}
									</view>
									<view class="text-t">
										{{item.type}}
									</view>
								</view>
								<view class="middle">
									{{item.name}}<text>/{{item.schoolHour}}节</text>
								</view>
								<view class="bottom">
									<view class="text">
										￥{{item.price}}
									</view>
									<view class="buy" @tap="toCardInfo(item)">
										立即购买
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
			</swiper>
			<view class="no-content" v-if="!isshow1">
				<image src="../../../static/images/no_card.png" mode="" class="no-img"></image>
				<view class="no-text">亲，暂无会员卡哦</view>
			</view>
		</view>
		<view class="can-buy">
			<view class="title">
				已有会员卡
			</view>
			<swiper v-if="isshow2" class="card-swiper" style="padding:0 15rpx;"
				 :autoplay="false" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
				 indicator-active-color="#0081ff">
					<swiper-item  v-for="(item,index) in swiperList1" :key="index"  style="left:28rpx;padding: 0;">
						<view class="swiper-item" :class="{onlyOne:swiperList1.length == 1}" style="padding-right:24rpx"  v-if="isshow2" @tap="toCardInfo1(item)">
							<view class="card card2">
								<view class="top">
									<view class="text">
										{{item.type}}
									</view>
									<image src="../../../static/images/vip1.png" mode="aspectFill"></image>
								</view>
								<view class="middle">
									{{item.name}}<text>/{{item.schoolHour}}节</text>
								</view>
								<view class="bottom">
									<view class="text" style="font-size: 10px;margin: 117rpx 0 50rpx 50rpx;color: #B59C78;">
										剩余{{item.surplusHour}}节
									</view>
									<view class="text1" style="font-size: 20rpx;">
										{{shopName}}
									</view>
									<view class="time" style="font-size: 20rpx;">
										{{item.expireDate.replace('T', ' ')}} 过期
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
			</swiper>
			<view class="no-content" v-if="!isshow2">
				<image src="../../../static/images/no_card.png" mode="" class="no-img"></image>
				<view class="no-text">亲，暂无会员卡哦</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	
	import {findUserCard} from '@/api/index.js';
	export default {
		data() {
			return {
				cardCur: 0,
				swiperList: [],//可购会员卡
				swiperList1: [],//已有会员卡
				dotStyle: false,
				towerStart: 0,
				direction: '',
				isshow1: true,//可购会员卡显示
				isshow2: true,//已购会员卡显示
				shopName: ''
			};
		},
		onLoad() {
			this.TowerSwiper('swiperList');
			// 初始化towerSwiper 传已有的数组名即可
			this.MemberCard();//获取用户会员卡
		},
		onShow() {
			this.MemberCard();//获取用户会员卡
		},
		methods: {
			//获取用户会员卡
			MemberCard() {
				let _this = this
				let id = uni.getStorageSync('shopID')
				console.log(id)
				let data = {
					queryVipType:'AVAILABLEANDPURCHASED',
					shopId: id
				}
				findUserCard(data).then(res=>{
					console.log(res)
					uni.showToast({
					    title: '加载中',
						icon: 'loading',
						duration: 3000,
						success:function(){
							console.log(res)
							if(res.available.length==0){
								_this.isshow1=false
							}else {
								_this.isshow1=true
								_this.swiperList=res.available //可购会员卡
							}
							if(res.purchased.length==0){
								_this.isshow2=false
							}else {
								_this.isshow2=true
								_this.swiperList1=res.purchased //已购会员卡
							}			
							_this.Inquiryshop(id);//查询店铺信息
							uni.hideToast();
						}
					})
				})
			},
			//查询店铺信息
			Inquiryshop(id) {
				let shoplist = uni.getStorageSync('shoplist')
					let arr = shoplist.filter(itm=>{
						return itm.id==id
					})
					this.shopName = arr[0].shopName
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
			toCardInfo(item){
				
				uni.navigateTo({
				    url: 'card_info?item='+JSON.stringify(item)
				}); 
			},
			toCardInfo1(item){
				uni.navigateTo({
				    url: 'card_info1?item='+JSON.stringify(item)
				});
			},
			toDetail(){
				uni.navigateTo({
				    url: 'consumer_details'
				});
			},
			toDetail1(){
				uni.navigateTo({
				    url: 'Pendingpayment'
				});
			}
		}
	}
</script>

<style lang="scss">
	.card-swiper .swiper-item{
		-webkit-transform:scale(1)!important;
		transform:scale(1)!important;
		left:28rpx!important;
		/* border:1px solid red; */
		padding:0;
		width: 610rpx!important;
		height:380rpx!important;
		border-radius: 26rpx;
	}
	.card-swiper .onlyOne{
		width: 690rpx!important;
	}
	.card-swiper uni-swiper-item{
		left:28rpx!important;

		padding:0;
	}
	.card1{
		-webkit-transform:scale(1)!important;
		transform:scale(1)!important;
		left:-60rpx!important;
		padding:0;
		width:100%;
		height: 380rpx;
		padding:0;
		background: url(../../../static/images/vip2.png);
		background-size: cover;
		margin-right: 28rpx;
		border-radius: 26rpx;
	}
	.card2{
		/* border:1px solid red; */
		-webkit-transform:scale(1)!important;
		transform:scale(1)!important;
		/* left:28rpx!important; */
		left:-60rpx!important;
		/* border:1px solid red; */
		padding:0;
		width:100%;
		height: 380rpx;
		background: url(../../../static/images/vip.png);
		background-size: cover;
		margin-right: 28rpx;
		border-radius: 26rpx;
	}
	.top image{
		width:82rpx;
		height:40rpx;
		margin:32rpx;
	}
	.top{
		color: #B59C78;
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
	}
	.top .text{
		flex: 1;
		padding:32rpx 46rpx 32rpx 46rpx;
	}
	.middle{
		text-align: center;
		font-size: 60rpx;
		color: #B59C78;
	}
	.middle text{
		font-size: 40rpx;
	}
	.bottom{
		display: flex;
		flex-direction: row;
		margin-top: 10rpx;
	}
	.bottom .text{
		color: #776852;
		font-size: 28rpx;
		margin:88rpx 0 50rpx 50rpx;
		flex: 1;
	}
	.bottom .buy{
		color: #E1CEAD;
		font-size: 28rpx;
		margin:66rpx 32rpx 36rpx 0rpx;
		background: #0B0404;
		width:176rpx;
		height:76rpx;
		border-radius: 400rpx;
		text-align: center;
		line-height: 76rpx;
	}
	.details{
		display: flex;
		flex-direction: row;
		height: 100rpx;
		background: #fff;
		padding:0 36rpx;
		line-height: 100rpx;
		border-bottom:2upx solid #F5F5F5;
	}
	.details .text{
		flex: 1;
	}
	.can-buy{
		height: 496rpx;
		background: #fff;
	}
	.can-buy .title{
		color: #424242;
		font-size: 28rpx;
		font-weight: 700;
		padding:24rpx 0 24rpx 36rpx;
		margin-top:16rpx;
	}
	.text1{
		color: #DAB273;
		font-size: 24rpx;
		margin:116rpx 0rpx 50rpx 50rpx;
		flex: 1;
	}
	.time{
		color: #DAB273;
		font-size: 24rpx;
		margin:116rpx 50rpx 50rpx 0;
		
	}
	.text-t{
		line-height: 102upx;
		margin-right: 36upx;
	}
	.no-content {
		text-align: center;
		.no-img {
			width: 280rpx;
			height: 280rpx;
			margin-top:20rpx;
		}
		view{
			margin-top:-20rpx;
			color: #999;
		}
	}
</style>
